<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax</title>
		<jsp:include page="/admin/head.jsp"></jsp:include>
	</head>
	<body>
		<div id="show"></div>
		<hr style="width:100%; clear:left;"/>
		<button>一次同步按钮</button>
		<button>一次异步按钮</button>
		<button>十次同步按钮</button>
		<button>十次异步按钮</button>
		<script>
			var show = document.getElementById("show");
			console.info(show);
			var b = document.querySelectorAll("button");
			console.info(b);
			b[0].onclick = function(){
				// console.info("nihao");
				let xhr = new XMLHttpRequest(); //生成对象
				console.info(xhr);
				xhr.onreadystatechange = function(){
					console.info(xhr.readyState+":"+xhr.status);
					if(xhr.readyState==4){
						if(xhr.status==200){
							show.innerHTML += xhr.responseText;
						}
					}
				}
					xhr.open("get","inc.jsp?name=你好",true);//建立连接
					xhr.send();//进行发送
			};
			
			b[1].onclick = function(){
				// console.info("nihao");
				let xhr = new XMLHttpRequest(); //生成对象
				console.info(xhr);
				xhr.onreadystatechange = function(){
					console.info(xhr.readyState+":"+xhr.status);
					if(xhr.readyState==4){
						if(xhr.status==200){
							show.innerHTML += xhr.responseText;
						}
					}
				}
					xhr.open("get","inc.jsp?name=你好",true);//建立连接
					xhr.send();//进行发送
			};
			// 同步
			b[2].addEventListener("click",function(){
							for(let i=0;i<10;i++){
								let xhr = new XMLHttpRequest();
								xhr.onreadystatechange=function(){
									if(xhr.readyState==4&&xhr.status==200){
										show.innerHTML += xhr.responseText;
									}
								}
								
								xhr.open("get","inc.jsp?name="+i,false);
								xhr.send();
							}
						});
						
			// 异步
			b[3].addEventListener("click",function(){
				for(let i=0;i<10;i++){
					let xhr = new XMLHttpRequest();
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4&&xhr.status==200){
							show.innerHTML += xhr.responseText;
						}
					}
					
					xhr.open("get","inc.jsp?name="+i,true);
					xhr.send();
				}
			});

			
		</script>
	</body>
</html>
